<template>
  <div>
    <div class="header">
      <div class="inputItem">
        <div class="inputBox">
          <el-select
            class="select"
            v-model="WaybillStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in WaybillStatusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">结算单号</div>
        <div class="inputBox">
          <el-input v-model="steelNo" @keyup.enter.native="initList(1)">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">项目名称</div>
        <div class="inputBox">
          <el-input v-model="proName" @keyup.enter.native="initList(1)">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">车队名称</div>
        <div class="inputBox">
          <el-input v-model="fleetName" @keyup.enter.native="initList(1)">
          </el-input>
        </div>
      </div>

      <!-- 查询 -->
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="initList(1)"
        >查询</el-button
      >
      <el-button
        type="plain"
        size="small"
        icon="el-icon-refresh-right"
        @click="CleanUp"
        >清空</el-button
      >
    </div>
    <div class="main">
      <div class="list">
        <el-table :data="records" style="width: 100%" ref="table">
          <el-table-column
            align="center"
            prop="serialNumber"
            label="序号"
            width="70px"
          >
          </el-table-column>
          <el-table-column align="center" label="结算单状态" width="100">
            <template slot-scope="scope">
              <div
                class="tag"
                style="margin: 0 auto"
                v-if="scope.row.steelState == 1"
              >
                <div class="dian"></div>
                <div class="text">已结算</div>
              </div>
              <div
                class="tag yellow"
                style="margin: 0 auto"
                v-else-if="scope.row.steelState == 0"
              >
                <div class="dian"></div>
                <div class="text">待结算</div>
              </div>
              <div
                class="tag Canceled"
                style="margin: 0 auto"
                v-else-if="scope.row.steelState == 2"
              >
                <div class="dian"></div>
                <div class="text">已取消</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="steelNumber" label="结算单号" width="220">
          </el-table-column>

          <el-table-column align="center" prop="projectName" label="项目名称">
            <template slot-scope="scope">
              <div>{{ scope.row.projectName||'--.--' }}</div>
            </template>
          </el-table-column>
          <!--  <el-table-column align="center" prop="driverName" label="账期">
                    </el-table-column> -->
<!--          <el-table-column align="center" prop="orderType" label="业务类型">-->
<!--            &lt;!&ndash; 1, "拉货/搬家" -->
<!--                                2, "B端承运订单"-->
<!--                                3, "C端承运订单"-->
<!--                                4, "供应商订单"-->
<!--                                5, "撮合订单" &ndash;&gt;-->
<!--            <template slot-scope="scope">-->
<!--              <div>{{ scope.row.steelType.info }}</div>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column align="center" prop="fleetName" label="车队名称">
          </el-table-column>
          <el-table-column align="center" label="承运金额">
            <template slot-scope="scope">
              <div>
                {{ scope.row.orderAmount + "元" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="结算金额">
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.steelState == 0 && scope.row.allotState == 0
                    ? "----"
                    : scope.row.payAmount + "元"
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间">
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="text"
                  size="small"
                  @click="
                    $router.push({
                      path: '/home/carrierSettlement/list/receiptDetails',
                      query: { fleetSteelOrderId: scope.row.fleetSteelOrderId },
                    })
                  "
                  >详情</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination
          class="pagination"
          background
          layout="slot,prev, pager, next"
          :total="data.total * 1"
          :page-size="data.size * 1"
          :pager-count="5"
          @current-change="changePages($event)"
        >
          <template slot>
            <span
              style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              "
              >共{{ data.total }}条,每页{{ data.size }}条</span
            >
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- 运单审核 -->
    <!-- 详情对话框 -->
    <el-dialog
      class="waybillAuditBox"
      title="运单审核"
      :visible.sync="dialogVisible"
      width="440px"
    >
      <!-- <div class="prompt">
          <i class="el-icon-warning"></i>
          <div class="prompt_text">
  
            该运单司机修正了运量，由{{ this.Weight.cargoWeight + this.Weight.measureUnitStr }}修正为{{ this.Weight.amendWeight?this.Weight.cargoWeight:this.Weight.amendWeight + this.Weight.measureUnitStr }}
          </div>
        </div> -->
      <el-form
        :model="AuditForm"
        :rules="AuditRules"
        ref="AuditForm"
        label-width="100px"
        class="demo_AuditForm"
      >
        <el-form-item label="审核确定运量" prop="auditConfirmWeigh">
          <el-input v-model="AuditForm.auditConfirmWeigh">
            <div slot="suffix" style="padding: 0">
              <el-select
                v-model="AuditForm.measureUnitType"
                placeholder="请选择"
                class="danWei"
              >
                <el-option
                  v-for="item in danWeiArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-input>
        </el-form-item>
        <el-form-item label="审核司机运费" prop="amount">
          <el-input v-model="AuditForm.amount">
            <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
              元
            </div>
          </el-input>
        </el-form-item>
        <el-form-item label="审核结果" prop="waybillAuditResult">
          <el-radio-group v-model="AuditForm.waybillAuditResult">
            <el-radio :label="3">合规</el-radio>
            <el-radio :label="2">有异常</el-radio>
            <el-radio :label="1">作废</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="审核异常扣款"
          prop="amountLose"
          v-show="AuditForm.waybillAuditResult != 3"
        >
          <el-input v-model="AuditForm.amountLose">
            <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
              元
            </div>
          </el-input>
        </el-form-item>
        <el-form-item label="审核说明" prop="resultInfo">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="AuditForm.resultInfo"
            maxlength="30"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="审核附件" prop="auditUrls">
          <el-upload
            class="upload"
            :action="url"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :on-success="onSuccess"
            :file-list="fileList"
            :headers="headers"
            v-model="AuditForm.auditUrls"
          >
            <el-button size="small" class="uploadBtn" type="primary"
              >上传文件</el-button
            >
            <span slot="tip" class="el-upload__tip">
              仅可上传一份合同文件，支持PDF、JPG等格式
            </span>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: flex-end">
            <el-button @click="resetForm('AuditForm')">取消</el-button>
            <el-button type="primary" @click="submitAudit()">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from "@/http";
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from "@/components/titleVue";
import BASEURL from "@/http/BaseUrl";
export default {
  data() {
    return {
      dialogVisible: false, //运单审核弹窗显示
      orderStatus: "0", //0:待审核运单
      steelNo: "", //运单编号
      WaybillStatus: "", //全部状态
      fleetName: "", //车队名称
      proName: "",
      pageCurrent: "1",
      size: "15",

      TypeSelected: "",
      records: [],
      data: {},

      AuditResultValue: "",
      //全部状态选项
      WaybillStatusArr: [
        { value: "", label: "全部状态" },
        { value: "1", label: "已结算" },
        { value: "0", label: "待结算" },
        { value: "2", label: "已取消" },
      ],
      fileList: [], //上传文件
      AuditForm: {
        waybillId: "",
        auditConfirmWeigh: "",
        measureUnitType: "",
        amount: "",
        waybillAuditResult: "",
        amountLose: "",
        SerialNumber: "",
        auditUrls: "",
        resultInfo: "",
      },
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      url: BASEURL.TCHYURL + "/file/upload",
      Weight: {
        cargoWeight: "",
        measureUnitStr: "",
        amendWeight: "",
      },
      AuditRules: {},
      danWeiValue: "吨",
      danWeiArr: [
        {
          value: "2",
          label: "吨",
        },
        {
          value: "1",
          label: "车",
        },
        {
          value: "3",
          label: "件",
        },
      ],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      ////console.log(file, fileList);
      this.fileList = [];
    },
    handlePreview(file) {
      ////console.log(file, 3333);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onSuccess(response, file, fileList) {
      ////console.log(response)
      this.AuditForm.auditUrls = response.data.url;
      this.fileList.push({
        name: response.data.name,
        url: this.response.data.url,
      });
    },
    changePages(val) {
      this.pageCurrent = val;
      this.initList();
    },

    getSerialNumber(array) {
      // 前端解决序号
      array.forEach((item, i) => {
        let num = i + 1;
        item.serialNumber = num;
      });
    },
    initList(current) {
      ////console.log('213123123');
      // status判定 2:已完成运单, 1:在途运单, 0:待审核运单
      let params = {
        steelNo: this.steelNo,
        state: this.WaybillStatus,
        proName: this.proName,
        fleetName: this.fleetName,
        current: current==1?1:this.pageCurrent,
        size: this.size,
		counterparty:0
      };

      ////console.log('请求传参收款单', params)
      httpApi.carrierSettlementApi.receiptSupplierList(params).then((res) => {
        ////console.log('收123123123款单res',res);
        ////console.log('收123123123款单res', res);
        this.data = res.data.data;
        this.records = res.data.data.records;
        ////console.log(this.records);

        this.getSerialNumber(this.records);
      });
    },
    async resetForm(AuditForm) {
      this.AuditForm.measureUnitType = "";
      this.$refs[AuditForm].resetFields();
      this.dialogVisible = false;
    },

    CleanUp() {
      (this.steelNo = ""),
        (this.WaybillStatus = ""),
        (this.proName = ""),
        (this.fleetName = ""),
        this.initList(1);
    },

    //
    showWaybillAuditDialog(id, amendWeight, cargoWeight, measureUnitStr) {
      this.AuditForm.waybillId = id;
      this.Weight.amendWeight = amendWeight;
      this.Weight.cargoWeight = cargoWeight;
      this.Weight.measureUnitStr = measureUnitStr;
      this.dialogVisible = true;
    },
    // 运单审核确定提交
    submitAudit() {
      let params = this.AuditForm;
      httpApi.WaybillManagementApi.auditWaybill(params).then((res) => {
        if (res.data.code == 200) {
          this.$message("审核成功");
          this.dialogVisible = false;
          this.$router.go(0);
        } else {
          this.$message("审核失败");
        }
      });
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
          //console.log(res.target.scrollTop);
    },
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table.bodyWrapper.addEventListener('scroll',this.scrollEvent,false)
    // 激活设置滚动位置
    this.$refs.table.bodyWrapper.scrollTop=this.$route.meta.scrollTop 
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },
  mounted() {
    this.initList();
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 29px;

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    > .title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    > .inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 267px);
  background-color: #fff;
  padding: 0px 30px;

  .list {
    height: calc(100% - 48px);
    width: 100%;

    .tag {
      width: 63px;
      height: 28px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background-color: #ecf5fe;
      color: #1890ff;

      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin-right: 4px;
        background-color: #1890ff;
      }

      &.yellow {
        background-color: #fffce8;
        color: #f8b030;

        .dian {
          background-color: #f8b030;
        }
      }
      &.Canceled {
        background-color: #fde8e9;
        color: #f5222d;

        .dian {
          background-color: #f5222d;
        }
      }
    }

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 365px);
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;

    align-items: center;

    .pagination {

      margin-left: auto;

    }
  }
}

// 运单审核弹窗
.waybillAuditBox {
  ::v-deep .el-dialog__body {
    padding: 30px 30px 24px 30px;
  }

  .prompt {
    padding: 20px;
    height: 32px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    background-color: #fdf6ec;
    margin-bottom: 20px;
    border: 1px solid #faecd8;

    .el-icon-warning {
      color: #e6a23c;
      font-size: 13.33px;
      margin-right: 12px;
    }

    .prompt_text {
      color: #e6a23c;
      font-size: 12px;
      height: 22px;
      line-height: 22px;
    }
  }

  .uploadFileBtn {
    border: 1px solid #dcdfe6;
  }

  .danWei {
    ::v-deep .el-input__inner {
      width: 68px;
      border: none;
      background-color: #f5f7fa;
      color: #606266;
      font-size: 12px;
      height: 37px;
      border-left: 1px solid #dcdfe6;
      border-radius: 0;
      position: relative;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      right: -4px;
      top: -1px;
    }
  }
}
</style>
